// ---------------------   左中task6 立体柱形图  --------------------------------------
function market6b(market_name = '华冠超市') {
    $.post('http://127.0.0.1:5000/data-api/task6b', {market_name: market_name}).done(function (data) {
        var myChart = echarts.init(document.querySelector(".rightUp .domz .chart2"));
        var colors = {
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [{
                offset: 0,
                color: '#8470FF'
            }, {
                offset: 0.5,
                color: '#8470FF'
            }, {
                offset: 0.5,
                color: '#7EC0EE'
            },
                {
                    offset: 1,
                    color: '#7EC0EE'
                }
            ]
        };
        var barWidth = 20;
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    return params[0]['name'] + ': ' + params[0]['value'] + '万元'
                }
            },
            title:{
                text:'全国水果分科销量',
                left:'center',
                textStyle: {
                        fontSize:12,
                        color: '#f3f3f3'
                    },
            },
            grid: {
                left: '9%',
                right: '7%',
                bottom: '7%',
                top: '24%',
                containLabel: true
            },
            legend: {
                left: 880,
                selectedMode: true, //取消图例上的点击事件
                top: 1,
                textStyle: {
                    color: "black",
                    fontSize: 14
                },
                itemWidth: 12,
                itemHeight: 10,
                color: '#fff'
            },
            xAxis: {
                type: 'category',
                data: data['产品分类'],
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    rotate: 45,
                    fontSize:10,
                    textStyle: {
                        fontFamily: 'Arial',
                        color: '#cecece'
                    }
                },
                axisTick: {
                    alignWithLabel: true,
                },
                boundaryGap: 0,
                offset: 10,
            },
            yAxis: {
                type: 'value',
                name: "销售额/(万元)",
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#cecece' //左侧显示线
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                axisLabel: {
                    fontSize: 12
                },
                offset: 10,
            },
            series: [
                {
                    type: 'bar',
                    barGap: '7%',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: colors,
                            barBorderRadius: 0,
                        },

                    },
                    label: {
                        show: true,
                        position: ['6', '-20'],
                        color: '#8e75cf',
                        fontSize: 9,
                    },
                    data: data['销量'],
                },
                {
                    z: 2,
                    type: 'pictorialBar',
                    data: [1, 1, 1, 1, 1, 1, 1],
                    symbol: 'diamond',
                    symbolOffset: ['0%', '50%'],
                    symbolSize: [barWidth, 10],
                    itemStyle: {
                        normal: {
                            color: colors
                        }
                    },
                },
                {
                    z: 3,
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    data: data['销量'],
                    symbol: 'diamond',
                    symbolOffset: ['0%', '-50%'],
                    symbolSize: [barWidth - 4, 10 * (barWidth - 4) / barWidth],
                    itemStyle: {
                        normal: {
                            borderColor: '#8470FF',
                            borderWidth: 2,
                            color: '#7EC0EE'
                        }
                    },
                },

            ]

        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    });
}

// 启动|刷新 浏览器 调用
market6b();